<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车商城--汽车报价大全</title>
    <link rel="shortcut icon" href="/auto/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/auto/Css/base.css">
    <link rel="stylesheet" href="/auto/Css/lib.css">
    <link rel="stylesheet" href="/auto/Css/index.css">
    <link rel="stylesheet" href="/auto/Css/VehicleScre.css">
    <script src="/admin/qrcode/jquery2.1.4.js"></script>
    <script src="/auto/js/VehicleScre.js"></script>
    <script src="/admin/layer/layer.js"></script>
</head>

<body>
<!-- top bar -->
<div class="top_bar">
    <div class="top_bar_con">
        <div class="top_bar_left">
            <img src="/auto/images/logo.png" alt="">
            <img src="/auto/images/slogan.svg" alt="">
        </div>
        <div class="top_bar_search clearfix">
            <form action="">
                <input type="text" class="search-input" name="keyword" placeholder="搜索品牌、车型等" id="search-input">
                <i class="fa fa-search "></i>
                <input type="submit" class="search-btn" value="搜索" id="search-btn" bosszone="search">
            </form>
        </div>
        <div class="top_bar_right">
            <a href="/end/auto/index.html" class="active">首页</a>
            <a href="/end/auto/VehicleScre.html">选车</a>
            <a href="/end/auto/Personal.html" id="userCollect">我的收藏</a>
            <button id="loading">请登录</button>
            <a href="javascript:;" id="user"></a>
            <button id="loginOut">退出</button>
        </div>
    </div>
</div>
<!--车型分类  -->
<div class="vehicle_scre">
    <div class="veh">
        <p>选新车</p>
    </div>
    <div class="vehicle_tit">
        <ul class="brand category">
            <li class="title">
                品牌
            </li>
            <li class="current">
                <a href="javascript:;">热门</a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/daz.png" alt="">
                    <span>大众</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/audi.png" alt="">
                    <span>奥迪</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/fengt.png" alt="">
                    <span>丰田</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/bc.png" alt="">
                    <span>奔驰</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/baom.png" alt="">
                    <span>宝马</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/beik.png" alt="">
                    <span>别克</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/byd.png" alt="">
                    <span>比亚迪</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/dfbt.png" alt="">
                    <span>本田</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/gqcq.png" alt="">
                    <span>广汽传祺</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/tsl.png" alt="">
                    <span>特斯拉</span>
                </a>
            </li>
        </ul>
        <ul class="carPrice category">
            <li class="title">
                价格
            </li>
            <li class="current">
                <a href="javascript:;">不限</a>

            </li>

            <li>
                <a href="javascript:;">10万以下</a>

            </li>
            <li><a href="javascript:;">10万-15万</a></li>
            <li><a href="javascript:;">15万-20万</a></li>
            <li><a href="javascript:;">20万-25万</a></li>
            <li><a href="javascript:;">25万-30万</a></li>
            <li><a href="javascript:;">30万-40万</a></li>
            <li><a href="javascript:;">40万-50万</a></li>
            <li><a href="javascript:;">50万以上</a></li>
        </ul>
        <ul class="level rank category">
            <li class="title">
                级别
            </li>
            <li class="current">
                <a href="javascript:;">不限</a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/0-bg-1b2ca3ba45d72dee9318..png" alt="">
                    <span>轿车</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/1-bg-62ba448dee36462889fe..png" alt="">
                    <span>SUV</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/2-bg-12253c0aa7acd4690a52..png" alt="">
                    <span>MPV</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/4-bg-1b894007da76329bc67e..png" alt="">
                    <span>轿跑</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/6-bg-2a12552ca47691cc2b8c..png" alt="">
                    <span>面包车</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="/auto/images/Vehicle screening/9-bg-0997616faa800bd5d577..png" alt="">
                    <span>皮卡</span>
                </a>
            </li>
        </ul>
        <ul class="energy category">
            <li class="title">
                能源
            </li>
            <li class="current">
                <a href="javascript:;">不限</a>
            </li>
            <li>
                <a href="javascript:;">汽油</a>
            </li>
            <li>
                <a href="javascript:;">柴油</a>
            </li>
            <li>
                <a href="javascript:;">油电混合</a>
            </li>
            <li>
                <a href="javascript:;">新能源</a>
            </li>
            <li>
                <a href="javascript:;">48V轻混系统</a>
            </li>
        </ul>
    </div>
</div>

<!-- 车型推荐 -->
<div id="main" class="recom_main">
</div>


<!-- 首页底部 -->
<div class="bottom_bar">
    <div class="custom_ser">
        <div class="custom_ser_main">
            <div>
                <span>周一至周五</span><br>
                <span>9:00-17:00</span>
            </div>
            <div>
                <h4>175-3012-3061</h4>
                <p>商城客服热线</p>
            </div>
            <div>
                <img src="/auto/images/1210339.png" alt="">
            </div>
            <div>
                <h3>扫码享权益</h3>
                <p>优惠随时掌握</p>
            </div>
        </div>
    </div>
    <div class="about_us">
        <div class="about_us_main">
            <ul>
                <li>
                    <a href="#">关于我们</a>
                </li>
                <li>
                    <a href="#">About Us</a>
                </li>
                <li>
                    <a href="#">隐私政策</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>
                <li>
                    <a href="#">客服中心</a>
                </li>
            </ul>
            <br>
            <p>Copyright © 2021 - 2022 Car Shop. All Rights Reserved</p>
            <p>汽车商城 版权所有</p>
        </div>
    </div>
</div>
<!-- 登录页面 -->
<div class="land_page_back">
    <div class="land_page">
        <div class="land_page_con">
            <div class="land_page_top">
                <p>💁‍♂️ 密码登录</p>
                <a href="#" id="load_close">✕</a>
            </div>
            <div class="land_page_main">
                <input id="phone" placeholder="请输入手机号" type="tel" maxlength="50" autocomplete="tel"
                       name="account" value="">
                <input id="pas_input" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                       name="account" value="">
                <img id="eye_img" src="/auto/images/close.png" alt="">
                <button type="button" id="login">登录</button>
            </div>
            <div class="land_page_bottom">
                <a href="#" id="click_register">没有账号？点击注册</a> <br>
                <p>登录即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
            </div>
        </div>
    </div>
    <div class="register">
        <div class="land_page">
            <div class="land_page_con">
                <div class="land_page_top">
                    <p>🙆‍♂️ 注册账号</p>
                    <!-- <a href="#" id="load_close">✕</a> -->
                </div>
                <div class="land_page_main register_main">
                    <input placeholder="请输入手机号" id="addPhone" type="tel" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <input placeholder="请输入用户名" id="addName" type="tel" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <input id="pas1" placeholder="请输入密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye1" src="/auto/images/close.png" alt="">
                    <input id="pas2" placeholder="确认密码" type="password" maxlength="50" autocomplete="tel"
                           name="account" value="">
                    <img id="eye2" src="/auto/images/close.png" alt="">
                    <label>
                        <p>注册即表示你同意<a href="#">用户协议</a>和<a href="#">隐私条款</a></p>
                    </label>
                    <button type="button" id="userAdd">点击注册</button>
                </div>
                <div class="land_page_bottom">
                    <a href="#" id="return_log">↺返回登录</a> <br>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/auto/lib/jquery/1.11.3/jquery.min.js"></script>
<script src="/auto/lib/Swiper-3.4.2/js/swiper.js"></script>
<script>
    function GetQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function UrlParamHash(url) {
        var params = [], h;
        var hash = url.slice(url.indexOf("?") + 1).split('&');
        for (var i = 0; i < hash.length; i++) {
            h = hash[i].split("=");
            params.push(h[0]);
            params[h[0]] = h[1];
        }
        return params;
    }

    $(function () {
        $('.category').children('li').click(function () {
            let priceUp=0;
            let priceDown=0;
            let url = window.location.href;
            // $(this).addClass('current').siblings().removeClass('current');
            // $(this).children('a').css('color', '#fff');
            // $(this).siblings().children('a').css('color', '#000');
            let contentTitle = $(this).siblings('.title').html().trim();
            let contentText = $(this).children('a').text().trim();
            switch (contentTitle) {
                case "价格":
                    contentTitle = "price";
                    break;
                case "品牌":
                    contentTitle = "f1";
                    break;
                case "级别":
                    contentTitle = "r1";
                    break;
                case "能源":
                    contentTitle = "n1";
                    break;
            }
            if(contentText==="不限"||contentText==="热门"){
                contentText="x";
            }
            // console.log(contentText);
            // console.log(contentTitle);
            if (contentTitle != "price") {
                if(contentText==="不限"||contentText==="热门"){
                    contentText="x";
                }
                if (url.includes(contentTitle)) {
                    let params = UrlParamHash(url);
                    let goal = params[contentTitle];
                    goal = contentTitle+"="+goal;
                    url = url.replace(goal, contentTitle+"="+contentText);
                } else {
                    url = url.includes('?') ? url + '&' : url + '?';
                    url = url + contentTitle + "=" + contentText;
                }
            } else {
                let p1 = "price1";
                let p2 = "price2";
                if (contentText == '10万以下') {
                    priceUp = 100000;
                } else if (contentText == '10万-15万') {
                    priceUp = 150000;
                    priceDown = 100000;
                } else if (contentText == '15万-20万') {
                    priceUp = 200000;
                    priceDown = 150000;
                } else if (contentText == '20万-25万') {
                    priceUp = 250000;
                    priceDown = 200000;
                } else if (contentText == '25万-30万') {
                    priceUp = 300000;
                    priceDown = 250000;
                } else if (contentText == '30万-40万') {
                    priceUp = 400000;
                    priceDown = 300000;
                } else if (contentText == '40万-50万') {
                    priceUp = 500000;
                    priceDown = 400000;
                } else if (contentText == '50万以上') {
                    priceUp = 0;
                    priceDown = 500000;
                }
                if (url.includes(p1)) {
                    let params = UrlParamHash(url);
                    let goal = params[p1];
                    goal = p1+"="+goal;
                    url = url.replace(goal, p1+"="+priceDown);
                } else {
                    url = url.includes('?') ? url + '&' : url + '?';
                    url = url + p1 + "=" + priceDown;
                }
                if (url.includes(p2)) {
                    let params = UrlParamHash(url);
                    let goal = params[p2];
                    goal = p2+"="+goal;
                    url = url.replace(goal, p2+"="+priceUp);
                } else {
                    url = url.includes('?') ? url + '&' : url + '?';
                    url = url + p2 + "=" + priceUp;
                }
            }
            //console.log(url)
            location.assign(url);
        });
    });
    $(function () {
        let price = GetQueryString("price1");
        let price2 = GetQueryString("price2");
        let energy = GetQueryString("n1");
        let ran = GetQueryString("r1");
        let firm = GetQueryString("f1");
        if (ran==="x"){
            ran=null;
        }
        if (firm==="x"){
            firm=null;
        }
        if (energy==="x"){
            energy=null;
        }
        $.ajax({
            type: "GET",
            url: "/Views/queryByName",
            data: {
                ran: ran,
                firm: firm,
                price: price,
                price2: price2,
                energy: energy
            },
            dataType: "json",
            success: function (data) {
                if (data.length === 0) {
                    $("#main").html("<h2>暂无车辆信息</h2>")
                } else {
                    let str = '<div class="recom">';
                    for (let i = 1; i <= data.length; i++) {
                        let priceMin = data[i - 1].priceMin != "" ? data[i - 1].priceMin / 10000 : 0;
                        priceMin = priceMin.toFixed(2);
                        let priceMax = data[i - 1].priceMax != "" ? data[i - 1].priceMax / 10000 : 0;
                        priceMax = priceMax.toFixed(2);
                        str += '<div class="recom_car">\n' +
                            '            <img src="/assets/images/carName/' + data[i - 1].picture +
                            '" alt="">\n' +
                            '            <p>' + data[i - 1].carName + '</p>\n' +
                            '            <span>' + priceMin + ' - ' + priceMax + '万元</span>\n' +
                            '            <a href="/end/auto/reservePrice.html?id=' + data[i - 1].id +
                            '">询底价</a>\n' +
                            '            <a href="/end/auto/product.html?id=' + data[i - 1].id +
                            '">参数</a>\n' +
                            '        </div>';
                        if (i % 4 === 0) {
                            str += '</div><div class="recom">'
                        }
                    }
                    if (data.length % 4 != 0) {
                        str += '</div>'
                    }
                    $("#main").html(str);
                }
            }
        })

    })
    $(function (){

    })
</script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',

        loop: true,
        autoplay: 2000,
        autoplayDisableOnInteraction: false,


        // 如果需要分页器
        pagination: '.swiper-pagination',
        paginationClickable: true,

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',

        // 如果需要滚动条
        //   scrollbar: '.swiper-scrollbar',
    })
</script>
<!-- 登录 -->
<script>
    var load = document.querySelector('.top_bar .top_bar_right #loading');
    var closePage = document.getElementById('load_close');

    var land_page = document.querySelector('.land_page_back');
    var reg_btn = document.getElementById('click_register');
    var login_page = document.querySelector('.land_page_back .land_page');
    var registerPage = document.querySelector('.land_page_back .register');
    var return_log = document.getElementById('return_log');
    console.log(load, closePage, land_page, reg_btn, login_page);
    load.onclick = function () {
        land_page.style.display = 'block';
    }
    closePage.onclick = function () {
        land_page.style.display = 'none';
    }
    reg_btn.onclick = function () {
        login_page.style.display = 'none';
        registerPage.style.display = 'block';
    }
    return_log.onclick = function () {
        login_page.style.display = 'block';
        registerPage.style.display = 'none';
    }

    // 控制密码是否可见
    // 登录 一个
    let eyeImg = document.getElementById('eye_img');
    let pasInput = document.getElementById('pas_input');

    let flag = false;
    eyeImg.onclick = function () {
        flag = !flag;
        if (flag) {
            eyeImg.src = '/auto/images/open.png';
            pasInput.type = 'text';
        } else {
            eyeImg.src = '/auto/images/close.png';
            pasInput.type = 'password';
        }
    }

    // 注册两个
    let eye1 = document.getElementById('eye1');
    let pas1 = document.getElementById('pas1');

    let flag1 = false;
    eye1.onclick = function () {
        flag1 = !flag1;
        if (flag1) {
            eye1.src = '/auto/images/open.png';
            pas1.type = 'text';
        } else {
            eye1.src = '/auto/images/close.png';
            pas1.type = 'password';
        }
    }

    let eye2 = document.getElementById('eye2');
    let pas2 = document.getElementById('pas2');

    let flag2 = false;
    eye2.onclick = function () {
        flag2 = !flag2;
        if (flag2) {
            eye2.src = '/auto/images/open.png';
            pas2.type = 'text';
        } else {
            eye2.src = '/auto/images/close.png';
            pas2.type = 'password';
        }
    }

    let login = document.getElementById('login');
    let userAdd = document.getElementById('userAdd');
    let loginOut = document.getElementById('loginOut');

    //判断是否登录
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Login/LoginBy",
            data: "",
            dataType: "json",
            success: function (data) {
                if (data.code === 200) {
                    $("#loading").hide();
                    $("#user").html(data.obj.userName);
                } else {
                    $("#loginOut").hide();
                    $("#userCollect").hide();
                }
            }
        })
    })

    //登录
    login.onclick = function () {
        let phone = $("#phone").val();
        let password = $("#pas_input").val();
        var windowId = layer.load()
        $.ajax({
            type: "POST",
            url: "/Login/userLogin",
            data: {
                phone: phone,
                password: password
            }, //主要是分页和多条件参数数据
            dataType: "json",
            success: function (data) {
                //关闭弹窗
                layer.close(windowId);
                //显示结果和跳转页面
                layer.msg(data.msg)
                if (data.code === 200) {
                    location.reload()
                }
            }
        })
    }

    //注册
    userAdd.onclick = function () {
        let addName = $("#addName").val();
        let addPhone = $("#addPhone").val();
        let pwd1 = $("#pas1").val();
        let pwd2 = $("#pas2").val();
        if (pwd1 !== pwd2 || pwd1 === null || pwd2 === null) {
            alert("两次密码不匹配，或密码为空了");
        } else if (addName === null) {
            alert("用户名不能为空！")
        } else if (addPhone === null) {
            alert("手机号不能为空！")
        } else {
            $.ajax({
                type: "POST",
                url: "/Views/userAdd",
                data: {
                    phone: addPhone,
                    userName: addName,
                    passWord: pwd1
                },
                dataType: "json",
                success: function (data) {
                    if (data.code === 200) {
                        alert("注册成功,请登录")
                        location.reload(true);
                    } else if (data.code === 500) {
                        alert(data.msg);
                    } else {
                        alert(data.msg);
                    }
                }
            })
        }
    }

    loginOut.onclick = function () {
        $.ajax({
            type: "post",
            url: "/Login/userLogout",
            data: "",
            dataType: "json",
            success: function (data) {
                alert(data.msg);
                location.reload(true);
            }
        })
    }
</script>
<!-- 搜索功能 -->
<script>
    $("search-btn").click(function () {
        let s = $("#search-input").val();
        s.split(" ");
    })
</script>
</body>

</html>
